<template>



    <a-modal v-model:open="Visible" centered :confirmLoading="loading" @cancel="handleCancel">
        <a-spin tip="Loading..." :spinning="loading">
            <a-form :model="formState" v-if="!result.show" ref="formStateRef" :rules="rules" class="p-5">
                <slot name="default" :formState="props.formState"></slot>
            </a-form>
        </a-spin>
        <a-result v-if="result.show" :status="result.status" :title="result.title" :sub-title="result.subTitle">
            <template #extra>
                {{ result.time / 1000 }} 秒后自动关闭 <br>
                点击右上角关闭按钮，可提前关闭
            </template>
        </a-result>

        <template #footer>
            <a-space v-if="!result.show">
                <a-button @click="handleCancel">取消</a-button>
                <a-button type="primary" @click="onsubmit">确定</a-button>

            </a-space>
        </template>
    </a-modal>

</template>

<script lang="ts" setup>
import type { FormInstance } from 'ant-design-vue'
const formStateRef = ref<FormInstance>()
const Visible = ref(false)

const emit = defineEmits(['success', 'close'])
interface Props {
    formState: any
    rules: any
    editApi?: (params: any) => Promise<any>
    addApi?: (params: any) => Promise<any>
}
const props = withDefaults(defineProps<Props>(), {
    formState: {},
    rules: {},
    editApi: () => Promise.resolve({}),
    addApi: () => Promise.resolve({})
})

const loading = ref(false)
const result = reactive({
    show: false,
    status: 'success',
    title: 'Successfully Purchased Cloud Server ECS!',
    subTitle: 'Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.',
    time: 5000
})
const mode = ref<string>('add')
const timer = ref<NodeJS.Timeout>()
const open = (modes: string, record?: any) => {
    mode.value = modes

    if (record) {
        for (const key in record) {
            props.formState[key] = record[key]
        }
    }
    Visible.value = true
}

const onsubmit = async () => {
    try {
        await formStateRef.value?.validate()
        result.show = loading.value = true
        const res = mode.value === 'add' ? await props.addApi(props.formState) : await props.editApi(props.formState)
        console.log(res);
        formStateRef.value?.resetFields()
        // 清空父组件的表单数据
        Object.keys(props.formState).forEach(key => {
            props.formState[key] = ''
        })

        loading.value = false

        result.status = 'success'
        result.title = '操作成功'
        result.subTitle = '操作成功'
        emit('success')
        timer.value = setInterval(() => {
            result.time -= 1000
            if (result.time <= 0) {
                clearInterval(timer.value)
                result.time = 5000

                handleCancel()
                
            }
        }, 1000)

    } catch (error: any) {
        // const { code, message } = error?.data
        loading.value = result.show = false
        // result.status = 'error'
        // result.title = `错误代码:${code}`
        // result.subTitle = message
    }
}

const handleCancel = () => {
    formStateRef.value?.resetFields()
    result.show = loading.value = Visible.value = false

    // 清空父组件的表单数据
    Object.keys(props.formState).forEach(key => {
        props.formState[key] = ''
    })
    // 清理倒计时
    clearInterval(timer.value)
    result.time = 5000
    emit('close')
}
defineExpose({
    open
})
</script>
